<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>客户管理</title>
  <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" />
  <link href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all" rel="stylesheet" type="text/css" />
  <script type=javascript src="${pageContext.request.contextPath}/layui/jquery2.1.1.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/table.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/form.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/layer.js" ></script>
</head>

<body>
<div class="place">
  <span>位置：</span>
  <ul class="placeul">
    <li>系统管理</li>
    <li>日志管理</li>
    <li>基本内容</li>
  </ul>
</div>
<div class="rightinfo">
  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">员工编号：</label>
      <div class="layui-input-inline">
        <input type="text" id="empNo" name="empNo" placeholder="请输入" autocomplete="off" class="layui-input" >
      </div>

      <label class="layui-form-label">员工姓名：</label>
      <div class="layui-input-inline">
        <input type="text" id="eName" name="eName" placeholder="请输入" autocomplete="off" class="layui-input" >
      </div>

      <label class="layui-form-label">日志内容：</label>
      <div class="layui-input-inline">
        <input type="text" id="log" name="log" placeholder="请输入" autocomplete="off" class="layui-input" >
      </div>
      <label class="layui-form-label">操作模块：</label>
      <div class="layui-input-inline">
        <input type="text" id="mName" name="mName" placeholder="请输入" autocomplete="off" class="layui-input" >
      </div>
      <div class="layui-form-item" style="padding:20px 0px 0px 0px">
        <label class="layui-form-label">记录时间：</label>
        <div class="layui-input-inline">
          <input type="date" id="startTime" name="startTime"  class="layui-input" >
        </div>
        <div class="layui-form-mid">-</div>
        <div class="layui-input-inline">
          <input type="date" id="endTime" name="endTime"  class="layui-input" >
        </div>
        <div class="layui-btn-container" >
          <button type="button" class="layui-btn layui-btn-normal  btn-search" ><i class="layui-icon layui-icon-search"></i>查询</button>
        </div>
      </div>
      <table id="demo" lay-filter="test"></table>

    </div>
  </form>
  <script>
    layui.use(['table','form','layer','jquery'], function () {
      var table = layui.table,
              form = layui.form,
              layer = layui.layer,
              $ = layui.jquery;
      //表单初始化 传参


      //赋值部分
     /* $.ajax({
        url: "",
        type: "post",
        dataType: "json",
        success: function(data) {
          // console.log(data)
          //使用循环遍历，给下拉列表赋值
          $.each(data.data,function (index,value) {
            $("#mid").append(new Option(value.mName,value.mid))//对应映射字段名 第一个为显示的值  第二个为value值
          });
          form.render("select")//重新渲染 固定写法
        }
      });*/







      //查询
      $('.btn-search').on('click', function () {
        var empNo = $('#empNo').val();
        var eName = $('#eName').val();
        var mName = $('#mName').val();
        var log = $('#log').val();
        var startTime = $('#startTime').val();
        var endTime = $('#endTime').val();
        table.reload('demo', {
          url: 'log/getLogList',
          method: 'post',
          dataType: 'json',
          where: { //设定异步数据接口的额外参数，任意设
            empNo: empNo,
            eName: eName,
            mName: mName,
            log: log,
            startTime: startTime,
            endTime: endTime,
          },
          page: {
            curr: 1 //重新从第 1 页开始
          }
        });
      });
      //添加
      $('.btn-add').on('click', function () {
        layer.open({
          type: 2,
          shift: 2,
          title: '添加信息',
          area: ['1000px', '700px'],
          content: 'sys/users/userAdd.jsp',
          btnAlign: 'c',
          btn: ['关闭'],
        });
        form.render();
      });
      //删除
      $('.btn-dele').on('click', function () {
        var cs = table.checkStatus('demo');
        console.log(cs.data)
        var data = cs.data;
        var i = data.length;
        if (i < 1) {
          layer.msg('请选择需要删除的人员信息', {icon: 5});
          return;
        }
        layer.confirm('确定要删除选中的人员信息吗？', function (index) {
          $.ajax({
            url: 'user/deleteUser',
            type: 'post',
            data: {
              id: data[0].id
            },
            dataType: 'json',
            success: function (resp) {
              if (resp.success) {
                table.reload('demo', {
                  where: {
                  },
                  page: {
                    curr: 1 //重新从第 1 页开始
                  }
                });
                layer.msg(resp.message, {icon: 6});
              } else {
                layer.msg(resp.message, {icon: 5});
              }
            }
          });
        });
      });

      table.render({
        elem: '#demo'
        ,height: 600
        ,url: 'log/getLogList' //数据接口
        ,page: true //开启分页
        ,loading:true
        ,limit: 10   // 每页条数默认10
        ,limits: [1, 2, 4, 5,6,8,10] //设置可选的每页条数
        ,toolbar: 'default' //开启头部工具栏，并为其绑定左侧模板
        ,cellMinWidth: 0 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        ,id:'demo'
        ,cols: [[ //表头
          {type: 'checkbox', fixed: 'left'}
          ,{field: 'id', title: '序号',type:'numbers', sort: true, fixed: 'left',align: "center" }
          ,{field: 'empNo', title: '员工编号', sort: true,align: "center"
            ,templet: function (res) {
              return res.emp.empNo;
            }}
          ,{field: 'eName', title: '员工姓名', align: "center"
            ,templet: function (res) {
              return res.emp.ename;
            }}
          ,{field: 'mName', title: '操作模块', align: "center"
            ,templet: function (res) {
              return res.module.mName;
            }}
          ,{field: 'logs', title: '日志内容',align: "center"}
          ,{field: 'createTime', title: '记录时间',align: "center",templet: "#time1"}
          ,{fixed: 'right',title: '操作',toolbar: '#barDemo',width:220 , align: "center"}
        ]]
        ,done: function (){
          table.resize('demo');
        }
      });

      //工具条事件
      table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        // console.log(data)
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

        if(layEvent === 'detail'){ //查看
          layer.open({
            type: 2,
            shift: 2,
            title: '查看信息',
            area: ['1000px', '700px'],
            content: 'sys/users/userView.jsp',
            btnAlign: 'c',
            btn: ['关闭'],
            success: function (layero, index) {
              var body = layer.getChildFrame('body', index);
              body.find("#empNo").val(data.empNo);
              body.find("#ename").val(data.ename);
              body.find("#sex").val(data.sex);
              body.find("#tel").val(data.tel);
              body.find("#deptNo").val(data.deptNo);
              body.find("#job").val(data.job);
              body.find("#age").val(data.age);
              body.find("#hiredate").val(data.hiredate);
              body.find("#status").val(data.status);
              body.find("#dimissionTime").val(data.dimissionTime);
              body.find("#date1").val(data.birthday);
              body.find("#password").val(data.password);
            },
          });
          form.render();
        }

      });
      form.render();
    });
  </script>
  <script type="text/html" id="time1">
    {{#  if(d.createTime !=null){ }}
    <div>{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH-mm-ss')}}</div>
    {{#  } else {}}
    <div>{{}}</div>
    {{#  } }}
  </script>

  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="detail">查看日志信息</a>
  </script>
</div>
</body>
</html>
